<template>
  <div class="nav">
    <div class="nav-box">
      <svg
        t="1623940923499"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1902"
        width="32"
        height="32"
      >
        <path
          d="M795.077 144.008C806.597 127.1 826.003 116 848 116c35.346 0 64 28.662 64 64.018s-28.654 64.018-64 64.018c-21.997 0-41.403-11.1-52.923-28.008H347c-63.513 0-115 51.502-115 115.033 0 63.53 51.487 115.032 115 115.032h330c103.277 0 187 83.747 187 187.053s-83.723 187.053-187 187.053H326a8 8 0 0 1-8-8v-56.02a8 8 0 0 1 8-8h351c63.513 0 115-51.502 115-115.033 0-63.53-51.487-115.033-115-115.033H347c-103.277 0-187-83.746-187-187.052 0-103.307 83.723-187.053 187-187.053h448.077zM275.734 790.534L124.87 906.344A8 8 0 0 1 112 900V668.378a8 8 0 0 1 12.871-6.346l150.863 115.81a8 8 0 0 1 0 12.692z"
          fill="#1D86F0"
          p-id="1903"
        ></path>
      </svg>
    </div>
    <div class="nav-box">
      <Dropdown>
        <a class="dropdown-title" href="javascript:void(0)">
          user_name
          <Icon type="md-arrow-dropdown"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem>用户设置</DropdownItem>
          <DropdownItem>退出登录</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Dropdown>
        <a class="dropdown-title" href="javascript:void(0)">
          <Icon
            size="24"
            style="color: #1d86f0; margin-left: 8px"
            type="md-add"
          ></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem>扫一扫</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.nav-box {
  display: flex;
  flex-direction: row;
  height: 50px;
  align-items: center;
}
.nav {
  z-index: 1000;
  width: 100vw;
  height: 50px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  padding-left: 8px;
}
.dropdown-title {
  color: #0e1114;
}
</style>